<template>
  <div id="yanzi-player-box">
    <div @mouseenter="btnMouseenter" @mouseleave="btnMouseleave" @mousedown="move" :style="returnBtnStyle(btnStyle)"
         v-if="showOpenBtn" @click="openPlayer" :class="{ openButton: isPlay }" id="openButton" class="iconfont">
      &#xe66c;
    </div>
    <div id="yanzi-player" :class="{ shoyanziist: isShoyanziist, showMusic: currShowMusic }" class="yanzi-white"
         :style="'z-index:' + zIndex">
      <audio ref="yanziAudio111" id="yanzi-audio" @canplay="getDuration" crossorigin="anonymous"></audio>
      <div class="listAndLrc">
        <!-- 歌曲列表 -->
        <div v-show="isShoyanziistAndLrc" class="yanzi-playerList">
          <!-- 滚动到顶部 -->
          <span class="focusMusicItem goTop iconfont" @click="goTop">&#xe624;</span>
          <!-- 当前播放的歌曲，滚动到到可见 -->
          <span class="focusMusicItem iconfont" @click="focusMusic">&#xe6d4;</span>
          <div class="listTools">
            <div class="searchBox">
              <input @change="startSearchMusic" id="searchMusic" type="text" v-model="searchMusic"
                     placeholder="搜索歌名、歌手"/>
              <span class="iconfont" @click="startSearchMusic">&#xe65d;</span>
            </div>
            <input id="uploadMusicFile" ref="uploadMusicFile" accept=".mp3" type="file" style="display:none;"
                   @change="selectMusicFile"/>
          </div>
          <div class="musicListBox">
            <div @click="selectedListMusic(index)" class="musicItem" v-for="(item, index) in filterList" :key="index">
              <div class="musicName" :class="{ activeColor: musicIndex == index }"
                   v-html="item.author + ' - ' + item.name"></div>
            </div>
          </div>
        </div>
        <div v-show="isShowYesOrNo" class="yanzi-btn-group" style="position:absolute;top:10px;right:30px;z-index:1003;">
          <div @click="uploadLRC" class="yanzi-btn yanzi-btn-sm">保存</div>
          <div @click="clearLrc" class="yanzi-btn yanzi-btn-sm yanzi-bg-default">
            取消
          </div>
        </div>
        <!-- 歌词 -->
        <div v-if="!isShoyanziistAndLrc" class="yanzi-lrc">
          <div class="tispNull" v-show="!filterList[musicIndex].lrc">
            此歌曲没有歌词哦~
            <input id="lrcFileInput" type="file" ref="filElem" accept=".lrc" style="display:none;"
                   @change="selectLrcFile"/>
          </div>
          <div style="height:170px;" v-show="filterList[musicIndex].lrc"></div>
          <div class="lrcItems" :class="{ lrcActiveStyle: lrcColorIndex == index }"
               :lrc-active="currentTimeNumber == index ? 'Y' : ''" v-for="(item, index) in lrcArray" :key="index">
            {{ item }}
          </div>
          <div style="height:200px;" v-show="filterList[musicIndex].lrc"></div>
        </div>
      </div>
      <div class="yanziAudio-main">
        <!-- 关闭歌曲列表 -->
        <span id="colseMusic" @click="closePlayer" class="iconfont">&#xe623;</span>
        <div class="mainHead">
          <!-- 歌手头像 -->
          <div class="yanziAudio-icon" :class="{ pausedLoop: !isPlay }">
            <img v-if="filterList && filterList.length && filterList[musicIndex].image"
                 :src="filterList[musicIndex].image"/>
            <!--<img v-else src="../assets/music.png"/>-->
            <img v-else :src="require('@/assets/music.png')"/>
          </div>
        </div>
        <input type="file" accept=".gif,.png,.jpg,.jpeg" ref="musicIcon" @change="uploadMusicIcon"
               style="display:none;">
        <div class="tools">
          <span class="mainButton">
            <!-- 停止 -->
            <span @click="stop" class="iconfont">&#xe612;</span>
            <!-- 上一曲 -->
            <span @click="pre" class="iconfont">&#xe800;</span>
            <!-- 播放暂停 -->
            <span @click="playAndPause" v-if="!isPlay" class="iconfont"
                  style="font-size:30px !important;">&#xe60a;</span>
            <span @click="playAndPause" v-if="isPlay" class="iconfont"
                  style="font-size:30px !important;color:#1989fa;">&#xe60b;</span>
            <!-- 下一曲 -->
            <span @click="next()" class="iconfont">&#xe7ff;</span>
            <!-- 重新播放本曲目 -->
            <span @click="reset" class="iconfont">&#xe67d;</span>
          </span>
          <span class="btn2Block">
            <!-- 随机播放 -->
            <span @click="openAndCloseRandom" v-show="isRandom" class="iconfont"
                  style="font-size:16px !important;">&#xe6d8;</span>
            <!-- 顺序播放 -->
            <span @click="openAndCloseRandom" v-show="!isRandom" class="iconfont">&#xe67b;</span>
            <!-- 单曲循环 -->
            <span @click="isSingleLoop = !isSingleLoop" v-show="isSingleLoop" class="iconfont">&#xe6ae;</span>
            <!-- 全部循环 -->
            <span @click="isSingleLoop = !isSingleLoop" v-show="!isSingleLoop" class="iconfont"
                  style="font-size:16px !important;vertical-align: text-top;">&#xe61f;</span>
            <span class="iconfont volumeIcon">&#xe606;
              <div class="volumeBlock">
                <!-- 音量 -->
                <input @change="changeVolume" id="volume" type="range" orient="vertical" v-model="volumeValue"/><span
                  id="volumeValueNumber" style="">{{ volumeValue }}</span>
              </div>
            </span>
          </span>
        </div>
        <!-- 画布 -->
        <div id="canvasBlock">
          <canvas id="canvas" width="480" height="80"></canvas>
        </div>
        <div class="tools2">
          <!-- 当前播放的歌名 -->
          <div class="musicName" :class="{ loopMusicName: isPlay }">
            {{ returnMusicName() }}
          </div>
          <div class="listAndClose">
            <span class="speed">
              <span>{{ currentTime }}</span>
              <input @change="setCurrentTime" type="range" :max="allTimeNumber" min="0" step="1"
                     v-model="currentTimeNumber"/>
              <span>{{ allTime }}</span>
            </span>
            <!-- 显示歌词 -->
            <span style="float:right;" @click="shoyanziistAndLrc(false)" class="iconfont" :style="
              !isShoyanziistAndLrc && isShoyanziist
                ? 'color: #1989fa !important;'
                : ''
            ">&#xe727;</span>
            <!-- 显示歌曲列表 -->
            <span style="float:right;" @click="shoyanziistAndLrc(true)" class="iconfont" :style="
              isShoyanziistAndLrc && isShoyanziist
                ? 'color: #1989fa !important;'
                : ''
            ">&#xe657;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  name: "yanzi_player",
  data() {
    return {
      currentMusicName: "未播放...",
      searchMusic: "", //搜索的歌名
      yanziAudio: {}, //音频组件
      musicIndex: 0, //第几个 mp3
      isPlay: false, //是否在播放
      isMuted: false, //是否静音
      volumeValue: 50, //音量
      isShoyanziist: false, //是否显示歌曲和歌词列表
      isShoyanziistAndLrc: true, //显示歌曲列表还是歌词
      filterList: [], // 实时使用的歌曲集合
      isBuildCanvas: false, //是否调用画布
      isRandom: false, //是否随机播放
      isSingleLoop: false, //是否单曲循环
      currentTime: "00:00", //当前时长
      allTime: "00:00", //总时长
      currentTimeNumber: 0, //当前时长
      allTimeNumber: 0, //总时长
      lrcColorIndex: 0, //歌词变颜色
      lrcArray: null, //当前歌曲的歌词数组
      indexList: [], //下标数组
      lrcFile: {}, //可上传的 lrc 文件
      isShowYesOrNo: false, // 是否显示上传歌词的 确定、取消按钮
      currShowMusic: false,
      btnLeft: 0, // 按钮的 left
    };
  },
  watch: {
    musicList: {
      handler: function (newVal) {
        if (!newVal || !newVal.length) {
          this.getMusicList();
        } else {
          this.filterList = newVal;
        }
      },
      deep: true, //true 深度监听,
      immediate: true //侦听开始之后被立即调用
    },
    isShowMusic(newVal) {
      this.currShowMusic = newVal;
    },
    currShowMusic(newVal) {
      this.$emit("update:isShowMusic", newVal);
    }
  },
  props: {
    // 播放器层级
    zIndex: {
      type: String,
      default: "1111"
    },
    // 歌曲列表
    musicList: {
      type: Array,
      default: function () {
        return [];
      }
    },
    // 歌曲域名前缀
    prePath: {
      type: String,
      default: ""
    },
    //是否显示播放器
    isShowMusic: {
      type: Boolean,
      default: false
    },
    //初始化音量
    initVolume: {
      type: Number,
      default: 50
    },
    // 是否显示打开播放器的按钮
    showOpenBtn: {
      type: Boolean,
      default: true
    },
    // 按钮是否可拖拽
    openBtnDrag: {
      type: Boolean,
      default: true
    },
    // 自定义打开播放器按钮的样式
    btnStyle: {
      type: Object,
      default: function () {
        return {
          color: "white", // 字体颜色
          backgroundColor: "#ccc", // 背景颜色
          width: "50px", // 宽度
          height: "50px", // 高度
          left: "30px", // 左边距离
          bottom: "80px", // 下边距离
          shadowColor: "#666", // 阴影颜色
        }
      }
    }
  },
  created() {
    this.filterList = this.musicList;
  },
  mounted() {
    this.initMethods();
    this.yanziAudio = document.getElementById("yanzi-audio");
    this.volumeValue = this.initVolume ? this.initVolume : 50;
    this.yanziAudio.volume = this.volumeValue / 100;
    if (this.filterList.length)
      this.yanziAudio.src = this.prePath + this.filterList[0].src;
    // 对audio的一系列监听
    this.watchAudio();
  },
  methods: {
    // 获取默认歌曲列表
    getMusicList() {
      let that = this;
      $.ajax({
        type: "get",
        url: "https://xzlovecyy.com/server/music/getMusicList",
        dataType: "JSON",
        success: function (res) {
          console.log("默认歌曲列表获取成功");
          that.$emit("update:musicList", res.data);
          that.filterList = res.data;
        },
        error: function (err) {
          alert(err);
        }
      });
    },
    // 鼠标悬停 按钮
    btnMouseenter(e) {
      let that = this;
      let odiv = e.target; //获取目标元素
      let windowWidth = window.innerWidth;
      this.btnLeft = parseFloat(odiv.style.left);
      if (this.btnLeft < 0) {
        // 过渡
        that.yanziTransition(odiv, function () {
          odiv.style.left = 0 + 'px';
        });
      } else if (this.btnLeft >= windowWidth - (parseFloat(that.btnStyle.width) / 2)) {
        // 过渡
        that.yanziTransition(odiv, function () {
          odiv.style.left = windowWidth - parseFloat(that.btnStyle.width) + "px";
        });
      }
    },
    //鼠标移开 按钮
    btnMouseleave(e) {
      let that = this;
      let odiv = e.target; //获取目标元素
      let windowWidth = window.innerWidth;
      if (this.btnLeft < 0) {
        // 过渡
        that.yanziTransition(odiv, function () {
          odiv.style.left = that.btnLeft + 'px';
        });
      } else if (this.btnLeft >= windowWidth -
          (parseFloat(that.btnStyle.width) / 2)) {
        // 过渡
        that.yanziTransition(odiv, function () {
          odiv.style.left = that.btnLeft + 'px';
        });
      }
    },
    // 拖拽方法
    // @mousedown="move"
    move(e) {
      if (this.openBtnDrag) {
        let that = this;
        let odiv = e.target; //获取目标元素
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        document.onmousemove = (e) => { //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
          //移动当前元素
          if (left > 0 && left < window.innerWidth - parseFloat(that.btnStyle.width)) odiv.style.left = left + 'px';
          if (top > 0 &&
              top < window.innerHeight - parseFloat(that.btnStyle.height)) odiv.style.top = top + 'px';
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
          // 判断元素的位置，如果在左边最边缘或者右边最边缘，就缩进去一半
          let left = e.clientX - disX;
          let windowWidth = window.innerWidth;
          if (left <= 5) {
            // 过渡
            that.yanziTransition(odiv, function () {
              odiv.style.left = -(parseFloat(that.btnStyle.width) * 0.7) + 'px';
            });
          } else if (left >= (windowWidth - parseFloat(that.btnStyle.width) - 5)) {
            // 过渡
            that.yanziTransition(odiv, function () {
              odiv.style.left = windowWidth - (parseFloat(that.btnStyle.width) * 0.3) + 'px';
            });
          }
        };
      }
    },
    //  过渡效果=> 参数： e=元素对象，time=过渡时长(单位：s)，fn=效果（这是一个方法）
    yanziTransition(e, fn, time) {
      if (!time) {
        time = 0.3;
      }
      e.style.setProperty('transition', 'all ' + time + 's', 'important');
      fn();
      setTimeout(function () {
        e.style.setProperty('transition', 'none', 'important');
      }, time * 1000);
    },
    // 返回按钮样式
    returnBtnStyle(btnOption) {
      if (!btnOption) {
        return "";
      }
      let shadowColor = btnOption.shadowColor ? "box-shadow:0 0 10px " + btnOption.shadowColor + " !important;" :
          "";
      let zIndex = this.zIndex ? "z-index:" + (parseFloat(this.zIndex) - 1) + " !important;" : "";
      let backgroundColor = btnOption.backgroundColor ? "background-color:" + btnOption.backgroundColor +
          "!important;" : "";
      let color = btnOption.color ? "color:" + btnOption.color + " !important;" : "";
      let width = btnOption.width ? "width:" + btnOption.width + " !important;" : "";
      let height = btnOption.height ? "height:" + btnOption.height + " !important;" : "";
      let lineHeight = btnOption.height ? "line-height:" + btnOption.height + " !important;" : "";
      let left = "";
      let top = "";
      if (btnOption.bottom) {
        try {
          let topNum = window.innerHeight - parseFloat(btnOption.bottom.replace("px", "")) -
              parseFloat(btnOption.height.replace("px", ""));
          top = topNum ? "top:" + topNum + "px !important;" : "";
        } catch (e) {
        }
      } else {
        top = btnOption.top ? "top:" + btnOption.top + " !important;" : "";
      }
      if (btnOption.right) {
        try {
          let leftNum = window.innerWidth - parseFloat(btnOption.right.replace("px", "")) -
              parseFloat(btnOption.width.replace("px", ""));
          left = leftNum ? "left:" + leftNum + "px;" : "";
        } catch (e) {
          console.log(e)
        }
      } else {
        left = btnOption.left ? "left:" + btnOption.left + ";" : "";
      }
      let style = shadowColor + zIndex + backgroundColor + color + width + height + lineHeight + top + left;
      return style;
    },
    uploadMusicIcon() {
      let data = this.filterList[this.musicIndex];
      let inputFile = this.$refs.musicIcon.files[0];
      data.iconFile = inputFile;
      this.$emit("uploadMusicIcon", data);
    },
    // 监听audio
    watchAudio() {
      let that = this;
      // 监听 audio 时间变化
      this.yanziAudio.addEventListener("timeupdate", function () {
        let time = Math.floor(this.currentTime);
        that.currentTime = that.timeFormat(time);
        that.currentTimeNumber = time;
        if (that.currentTimeNumber == that.allTimeNumber) {
          console.log("播放结束，跳转下一曲");
          that.autoNext();
          return false;
        }
        try {
          let obj = that.lrcArray[time];
          if (obj != undefined) {
            that.g = obj;
            // 当前歌词下标
            that.lrcColorIndex = time;
            // 滚动条滚动到当前歌词
            that.focusLRC();
          }
        } catch (e) {
          console.log("计算歌词出错");
        }
      });
      this.yanziAudio.addEventListener("playing", function () {
        //播放状态Doing
        that.isPlay = true;
      });
      this.yanziAudio.addEventListener("pause", function () {
        //暂停状态Doing
        that.isPlay = false;
      });
    },
    // 选中本地文件之后，开始调用父组件上传歌曲
    selectMusicFile() {
      const inputFile = this.$refs.uploadMusicFile.files[0];
      $("#uploadMusicFile").val(""); //置空文件域
      let data = this.filterList[this.musicIndex];
      data.musicFile = inputFile;
      this.$emit("uploadMusic", data);
    },
    //隐藏确定取消按钮
    clearLrc() {
      this.isShowYesOrNo = false;
      this.filterList[this.musicIndex].lrc = "";
      this.lrcArray = [];
    },
    // 选择 LRC 文件
    selectLrcFile() {
      let that = this;
      const inputFile = this.$refs.filElem.files[0];
      $("#lrcFileInput").val(""); //置空文件域
      if (inputFile) {
        that.isShowYesOrNo = true;
        // 放在页面变量中，用于上传
        that.lrcFile = inputFile;
        // 开始读取 LRC 文件的内容
        let reader = new FileReader();
        // 读取纯文本文件,且编码格式为 utf-8
        reader.readAsText(inputFile, "UTF-8");
        reader.onload = function (e) {
          let lrcContent = e.target.result;
          that.filterList[that.musicIndex].lrc = lrcContent;
          that.lrcArray = that.getLRC();
          that.focusLRC();
        };
      } else {
        return;
      }
    },
    // 上传 LRC文件
    uploadLRC() {
      let data = this.filterList[this.musicIndex];
      this.$emit("uploadLRC", data);
      this.isShowYesOrNo = false;
    },
    // 获取当前歌词
    getLRC() {
      let lyrics = this.filterList[this.musicIndex].lrc.split("\n");
      let lrcArray = {};
      for (let i = 0; i < lyrics.length; i++) {
        let lyric = decodeURIComponent(lyrics[i]);
        /* eslint-disable */
        let timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
        /* eslint-disable */
        let timeRegExpArr = lyric.match(timeReg);
        if (!timeRegExpArr) continue;
        let clause = lyric.replace(timeReg, "");
        for (let k = 0, h = timeRegExpArr.length; k < h; k++) {
          let t = timeRegExpArr[k];
          /* eslint-disable */
          let min = Number(String(t.match(/\[\d*/i)).slice(1));
          let sec = Number(String(t.match(/\:\d*/i)).slice(1));
          /* eslint-disable */
          let time = min * 60 + sec;
          lrcArray[time] = clause;
        }
      }
      return lrcArray;
    },
    initMethods() {
      // 按元素删除数组中对应的一个元素，添加到Array原型链
      Array.prototype.removeOneByElement = function (element) {
        let index = this.indexOf(element);
        this.splice(index, 1);
      };
    },
    //生成从minNum到maxNum的随机数
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        default:
          return 0;
      }
    },
    /**
     * start:开始数
     *  end:结束数
     */
    createRandomList(start, end) {
      let arr = [];
      for (let j = start; j < end; j++) {
        arr.push(j);
      }
      //首先从最大的数开始遍历，之后递减
      for (let i = arr.length - 1; i >= 0; i--) {
        //随机索引值randomIndex是从0-arr.length中随机抽取的
        let randomIndex = Math.floor(Math.random() * (i + 1));
        //下面三句相当于把从数组中随机抽取到的值与当前遍历的值互换位置
        let itemIndex = arr[randomIndex];
        arr[randomIndex] = arr[i];
        arr[i] = itemIndex;
      }
      //每一次的遍历都相当于把从数组中随机抽取（不重复）的一个元素放到数组的最后面（索引顺序为：len-1,len-2,len-3......0）
      return arr;
    },
    // 显示歌曲列表和歌词
    shoyanziistAndLrc(flag) {
      //isShoyanziist
      //isShoyanziistAndLrc
      if (this.isShoyanziist) {
        //列表打开了
        this.isShoyanziist = this.isShoyanziistAndLrc != flag;
        if ($("[lrc-active='Y']")[0]) {
          this.focusLRC();
        }
      } else {
        this.isShoyanziist = true;
      }
      this.isShoyanziistAndLrc = flag;
    },
    // 拖动播放进度
    setCurrentTime() {
      this.yanziAudio.currentTime = this.currentTimeNumber;
    },
    // 获取 音乐总时长
    getDuration() {
      this.allTimeNumber = Math.floor(this.yanziAudio.duration);
      this.allTime = this.allTime = this.timeFormat(
          Math.floor(this.yanziAudio.duration)
      );
    },
    //js将秒数转换成HH:MM:SS格式
    timeFormat(value) {
      let theTime = value; //秒
      let middle = 0; //分
      // let hour = 0; //小时
      if (theTime > 59) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
      }
      if (middle > 59) {
        // hour = parseInt(middle / 60);
        middle = parseInt(middle % 60);
      }
      let newTime =
          (middle < 10 ? "0" + middle : middle) +
          ":" +
          (theTime < 10 ? "0" + theTime : theTime);
      return newTime;
    },
    // 修改音量
    changeVolume() {
      this.yanziAudio.volume = this.volumeValue / 100; // audio的取值范围是0~1，而range的值默认是0~100，所以要除以100
    },
    // 开始搜索关键字
    startSearchMusic() {
      this.outStyle(this.searchMusic);
    },
    // 搜索后突出显示关键字
    outStyle(val) {
      let that = this;
      if (val) {
        that.filterList = [];
        that.musicList.forEach(function (item) {
          item.name = item.name.replace(/<b>/g, "").replace(/<\/b>/g, "");
          if (item.name.indexOf(val) != -1 || item.author.indexOf(val) != -1) {
            that.filterList.push(item);
          }
        });
        let newArr = [];
        that.filterList.forEach(function (item) {
          // item.name = item.name.replace(/<b>/g, "").replace(/<\/b>/g, "");
          if (item.name.indexOf(val) != -1) {
            item.name = item.name.replace(
                new RegExp(val, "g"),
                "<b>" + val + "</b>"
            );
            newArr.push(item);
          }
        });
        that.filterList = newArr;
      } else {
        that.musicList.forEach(function (item) {
          item.name = item.name.replace(/<b>/g, "").replace(/<\/b>/g, "");
        });
        console.log("没有");
        that.filterList = that.musicList;
        for (let i = 0; i < that.musicList.length; i++) {
          if (that.musicList[i].name == that.currentMusicName) {
            that.musicIndex = i;
            break;
          }
        }
        console.log(that.musicIndex);
        this.$nextTick(function () {
          this.focusMusic();
        });
      }
    },
    // 滚动到顶部
    goTop() {
      let panel = $(".musicListBox");
      panel.animate({
            scrollTop: 0
          },
          500
      );
    },
    //【聚焦】歌词滚动条
    focusLRC() {
      let panel = $(".yanzi-lrc");
      // let list = $(".lrcItems");
      let div = $("[lrc-active='Y']")[0];
      if (div) {
        let top = div.offsetTop;
        panel.animate({
              scrollTop: top - panel.height() / 2
            },
            200
        );
      }
    },
    //【聚焦】当前播放的歌曲在可见范围
    focusMusic() {
      let panel = $(".musicListBox");
      let div = $(".musicItem")[this.musicIndex];
      $(".musicItem:eq(" + this.musicList + ")").css(
          "background",
          "red !important"
      );
      panel.animate({
            scrollTop: div.offsetTop - panel.height() / 2
          },
          500
      );
    },
    // 关闭歌曲列表
    closePlayer() {
      let that = this;
      if (!this.isShoyanziist) {
        this.currShowMusic = false;
        this.$emit("update:isShowMusic", false);
      } else {
        this.isShoyanziist = false;
        setTimeout(() => {
          this.currShowMusic = false;
          that.$emit("update:isShowMusic", false);
        }, 300);
      }
    },
    openPlayer() {
      this.currShowMusic = true;
      this.$emit("update:isShowMusic", true);
    },
    // 打开或者关闭 随机模式
    openAndCloseRandom() {
      if (this.isRandom) {
        this.isRandom = false;
      } else {
        this.isRandom = true;
        this.buildIndexList();
      }
    },
    // 生成当前播放列表
    buildIndexList() {
      this.indexList = [];
      let arr = [];
      for (let i = 0; i < this.filterList.length - 1; i++) {
        arr.push(i);
      }
      this.indexList = arr;
    },
    // 返回当前播放的歌曲名
    returnMusicName() {
      if (!this.filterList.length) {
        return "列表为空";
      }
      let name = this.filterList[this.musicIndex].name
          .replace(/<b>/g, "")
          .replace(/<\/b>/g, "");
      this.currentMusicName = name;
      return name ? name : "未播放..";
    },
    // 随机下一首歌
    randomNext() {
      while (this.indexList.indexOf(random) == -1) {
        let random = this.randomNum(0, this.filterList.length - 1);
        console.log(random);
        if (this.indexList.indexOf(random) != -1) {
          this.indexList.removeOneByElement(random);
          let src = this.filterList[random].src;
          this.musicIndex = random;
          this.play(src);
          return false;
        }
      }
    },
    //停止
    stop() {
      this.currentTimeNumber = 0;
      this.yanziAudio.currentTime = 0;
      this.yanziAudio.pause();
      this.isPlay = false;
    },
    // 重新播放
    reset() {
      this.currentTimeNumber = 0;
      this.yanziAudio.currentTime = 0;
    },
    // 自动下一曲
    autoNext() {
      // 如果开启了单曲循环模式
      if (this.isSingleLoop) {
        this.currentTimeNumber = 0;
        this.yanziAudio.currentTime = 0;
        this.yanziAudio.play();
        return false;
      }
      let src = "";
      // 如果开启了随机播放模式
      if (this.isRandom) {
        this.randomNext();
        return false;
        //
      } else {
        // 正常全部顺序循环
        if (this.musicIndex + 1 < this.filterList.length) {
          this.musicIndex++;
        } else {
          this.musicIndex = 0;
        }
        src = this.filterList[this.musicIndex].src;
      }
      this.play(src);
    },
    // 点击列表的歌曲
    selectedListMusic(index) {
      if (
          this.filterList[index] &&
          this.filterList[index].src != this.yanziAudio.src
      ) {
        this.musicIndex = index;
        let src = this.filterList[index].src;
        this.play(src);
      }
    },
    // 播放或者暂停
    playAndPause() {
      if (this.isPlay) {
        this.isPlay = false;
        this.yanziAudio.pause();
      } else {
        if (this.isBuildCanvas) {
          this.isPlay = true;
          this.yanziAudio.play();
        } else {
          this.play();
        }
      }
    },
    // 播放
    play(src) {
      let audio = document.getElementById("yanzi-audio");
      this.isShowYesOrNo = false;
      if (src) {
        audio.src = this.prePath + src;
      } else {
        audio.src = this.prePath + this.filterList[this.musicIndex].src;
      }
      this.checkStatus_play(audio);
    },
    // 检查音频状态在播放
    checkStatus_play(audio) {
      // 获取单曲 歌词
      this.lrcArray = this.getLRC();
      this.isPlay = true;
      try {
        audio.play();
        this.focusMusic(); //聚焦到当前播放的歌曲
        this.focusLRC(); //聚焦到当前一句歌词
      } catch (e) {
        console.log("播放出错");
        this.isPlay = false;
      }
      if (!this.isBuildCanvas) {
        this.buildCanvas(audio);
      }
    },
    // 构建画布音频
    buildCanvas(audio) {
      this.isBuildCanvas = true;
      let ctx = new AudioContext();
      let analyser = ctx.createAnalyser();
      let audioSrc = ctx.createMediaElementSource(audio);
      audioSrc.connect(analyser);
      analyser.connect(ctx.destination);
      let canvas = document.getElementById("canvas"),
          cwidth = canvas.width,
          cheight = canvas.height - 2,
          meterWidth = 10,
          capHeight = 2,
          capStyle = "#fff",
          meterNum = 850 / (10 + 2),
          capYPositionArray = [];
      ctx = canvas.getContext("2d");
      let gradient = ctx.createLinearGradient(0, 0, 0, 110);
      gradient.addColorStop(1, "#0f0");
      gradient.addColorStop(0.5, "#ff0");
      gradient.addColorStop(0, "#f00");

      // loop
      function renderFrame() {
        try {
          let array = new Uint8Array(analyser.frequencyBinCount);
          analyser.getByteFrequencyData(array);
          let step = Math.round(array.length / meterNum);
          ctx.clearRect(0, 0, cwidth, cheight);
          for (let i = 0; i < meterNum; i++) {
            let value = array[i * step];
            if (capYPositionArray.length < Math.round(meterNum)) {
              capYPositionArray.push(value);
            }
            ctx.fillStyle = capStyle;
            if (value < capYPositionArray[i]) {
              ctx.fillRect(
                  i * 12,
                  cheight - --capYPositionArray[i] / 3,
                  meterWidth,
                  capHeight
              );
            } else {
              ctx.fillRect(i * 12, cheight - value / 3, meterWidth, capHeight);
              capYPositionArray[i] = value;
            }
            ctx.fillStyle = gradient;
            ctx.fillRect(
                i * 12,
                cheight - value / 3 + capHeight,
                meterWidth,
                cheight
            ); //the meter
          }
        } catch (e) {
          console.log("画布失败");
        }
        requestAnimationFrame(renderFrame);
      }

      renderFrame();
    },
    //   下一曲
    next() {
      if (this.musicIndex + 1 < this.filterList.length) {
        this.musicIndex++;
      } else {
        this.musicIndex = 0;
      }
      this.play();
    },
    //上一曲
    pre() {
      if (this.musicIndex - 1 >= 0) {
        this.musicIndex--;
      } else {
        this.musicIndex = this.filterList.length - 1;
      }
      this.play();
    }
  }
};
</script>

<style scoped>
@import "../assets/iconfont/iconfont.css";
</style>
<style>
#yanzi-player-box {
  user-select: none;
}

/* 播放器盒子 */
#yanzi-player {
  position: fixed !important;
  bottom: -2px;
  left: 0;
  z-index: 1001;
  position: relative;
  transition: all 0.3s;
  transform: translateX(-100%);
  border-radius: 0 10px 0 0;
}

.yanzi-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #2dbe60;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.yanzi-btn-mini {
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 12px;
}

.yanzi-btn-sm {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.yanzi-btn-group {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}

.yanzi-btn-group .yanzi-btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
}

.yanzi-btn-group .yanzi-btn:first-child {
  border-left: none;
  border-radius: 2px 0 0 2px;
}

.yanzi-btn-group .yanzi-btn:last-child {
  border-radius: 0 2px 2px 0;
}

.yanzi-bg-default {
  border: 1px solid #c9c9c9;
  background-color: #fff;
  color: #555;
  height: 28px;
  line-height: 28px;
}

.yanzi-bg-green {
  background-color: #009688;
  color: #fff;
}

.yanzi-bg-blue {
  background-color: #1e9fff;
  color: #fff;
}

.yanzi-bg-orange {
  background-color: #ffb800;
  color: #fff;
}

.yanzi-bg-red {
  background-color: #ff5722;
  color: #fff;
}

.showMusic {
  transform: translateX(0) !important;
}

.yanziAudio-main {
  border-radius: 0 10px 0 0;
  /* min-width: 400px; */
}

#canvasBlock {
  background: #333;
}

.listAndLrc {
  left: 0px;
  width: 100%;
  max-height: 400px;
  height: 400px;
  position: absolute;
  top: 100%;
  z-index: 1001;
}

.yanzi-playerList {
  height: 100%;
  position: relative;
  box-shadow: 0 0 10px #ccc;
}

.focusMusicItem {
  position: absolute;
  bottom: 30px;
  right: 20px;
  font-size: 30px !important;
  color: #ccc !important;
}

.goTop {
  bottom: 70px;
  font-size: 28px !important;
}

.musicListBox {
  width: calc(100% - 60px);
  margin: 0 auto;
  height: calc(100% - 70px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.shoyanziist {
  bottom: 400px !important;
}

/* 歌手头像 */
.yanziAudio-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  /*cursor: pointer;*/
  top: -30px;
  left: 10px;
  z-index: 1001;
  box-shadow: 0 0 10px #999;
  /* 使用动画 */
  animation: remindMessage 10s linear infinite;
}

.pausedLoop {
  animation-play-state: paused;
}

.yanziAudio-ico:hover {
  animation-play-state: paused;
  /*暂停动画*/
  /*animation-play-state:running;继续播放动画*/
}

/* 定义动画 - 一直旋转*/
@keyframes remindMessage {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.mainButton > .iconfont {
  margin: 5px;
}

.yanziAudio-icon img {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px auto;
  border-radius: 50%;
  display: block;
}

#yanzi-player .right {
  width: 100%;
  overflow: hidden;

  z-index: 1001;
}

.btn2Block {
  vertical-align: bottom;
  margin-left: 30px;
  height: 20px;
  display: inline-block;
}

.btn2Block .iconfont {
  /* margin: 0 5px; */
  float: left;
  margin-left: 15px;
}

.btn2Block .iconfont:nth-of-type(2) {
  margin-top: -1px;
}

/* 歌曲名 */
.tools2 .musicName {
  line-height: 40px;
  text-align: left;
  font-family: "STHeiti Light";
  color: #444;
  text-indent: 1em;
  white-space: nowrap;
  font-size: 14px;
}

.loopMusicName {
  /* 使用动画 */
  /* animation: loopMusicName 5s linear infinite; */
}

/* 定义动画 - 滚动歌名*/
@keyframes loopMusicName {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
  }
}

#yanzi-player .tools {
  /* padding-left: 100px; */
  background: #eee;
  border-radius: 0 10px 0 0;
  padding: 10px 50px 10px 130px;
}

.tools .iconfont {
  font-size: 18px !important;
}

.tools2 {
  background: #eee;
  display: flex;
  padding-right: 10px;
}

.tools2 > div:nth-of-type(1) {
  width: 50%;
}

.tools2 > div:nth-of-type(2) {
  width: 50%;
}

.speed {
  display: flex;
}

.speed span {
  font-size: 12px;
  margin: 0 5px;
}

.speed input {
  width: 100px;
}

/* 列表和关闭 */
.listAndClose {
  /* position: absolute;
top: 10px;
right: 10px; */
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}

.listAndClose .iconfont {
  margin: 0 5px;
  font-size: 18px !important;
}

.listTools {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}

/* 搜索框box */
.searchBox {
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  background: #e2e2e2;
  position: relative;
  width: calc(80% - 60px);
  margin-top: 10px;
}

.listTools .yanzi-btn {
  margin-top: 10px;
}

/* 搜索文本框 */
#searchMusic {
  width: calc(100% - 60px);
  border: none;
  outline: none;
  background: transparent;
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
}

.yanzi-lrc {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.tispNull {
  height: 400px;
  line-height: 400px;
  text-align: center;
}

.lrcItems {
  text-align: center;
  line-height: 40px;
  transition: all 0.3s;
}

.lrcActiveStyle {
  transform: scale(1.5);
  color: orangered;
}

#colseMusic {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  border-radius: 50%;
  padding: 3px;
}

#colseMusic:hover {
  background: red;
  color: white;
}

b {
  color: red;
}

.volumeIcon {
  position: relative;
}

/* 音量滑块样式 */
.volumeBlock {
  position: absolute;
  background: white;
  box-shadow: 0 0 10px #666;
  transform: rotate(90deg);
  width: 120px;
  left: -55px;
  top: -70px;
  border-radius: 10px;
  padding: 3px 10px;
  transition: all 0.3s;
  opacity: 0;
}

.volumeIcon:hover .volumeBlock {
  opacity: 1;
}

#volume {
  vertical-align: middle;
  height: 3px;
  width: 80px;
  transform: rotate(180deg);
}

#volumeValueNumber {
  font-size: 12px;
  position: relative;
  transform: rotate(-90deg);
  line-height: 30px;
  margin-left: 5px;
  display: inline-block;
}

#volume::-webkit-slider-thumb {
  /* -webkit-appearance: none; */
}

/* ************************************************颜色样式【yanzi-white】********************************************** */
/* 图标颜色 */
.yanzi-white .iconfont {
  font-size: 24px;
  color: #444;
  cursor: pointer;
}

/* 图标鼠标悬停颜色 */
.yanzi-white .iconfont:active {
  color: #1989fa !important;
}

/* 界面背景色 */
.yanzi-white,
.yanziAudio-icon,
.listAndLrc {
  background: white;
}

.yanzi-white .yanziAudio-main {
  box-shadow: 0 0 15px black;
}

.activeColor {
  color: #1989fa !important;
}

.yanzi-white .focusMusicItem:hover {
  color: #1989fa !important;
}

.musicItem .musicName {
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  padding: 0 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicItem .musicName:hover {
  background: #e2e2e2;
}

.musicListBox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #fff;
}

.musicListBox::-webkit-scrollbar-thumb {
  /* 鼠标停留之前，滚动条看不见 */
  background-color: #fff;
  height: 10px;
}

.musicListBox:hover::-webkit-scrollbar-thumb {
  /* 鼠标悬停，滚动条显示 */
  background-color: #e2e2e2;
}

#openButton {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: white;
  color: orange;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  /* border-radius: 0 50% 50% 0; */
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 10px #ccc;
  user-select: none;
}

.openButton {
  animation: remindMessage 5s linear infinite;
}

.yanziAudio-icon:hover {
  animation: rubberBand 1s;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

/* ************************************************颜色样式【yanzi-white】********************************************** */
</style>
